<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="storehouse">
        <navigation :msg="navMsg"></navigation>
        <div class="storehouse-top">
          <span>商 品 库</span>
        </div>
        <el-table :height="tableHeight" :data="storehouseData">
          <el-table-column label="商品来源" min-width="50%">
            <template slot-scope="scope">
              <div class="storehouse-content">
                <img src="../../../static/images/100.jpg">
                <div>{{scope.row.name.name}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品数量" min-width="25%" sortable prop="count"></el-table-column>
          <el-table-column label="近30天更新" min-width="25%" sortable prop="jincount"></el-table-column>
        </el-table>
        <Paging :msg="50" @pageNum="getPageNum" @pageId="getPageId"></Paging>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import Paging from '@/components/common/paging/Paging'
import navigation from '@/components/common/navigation/Navigation'

export default {
  data () {
    return {
      tableHeight: window.innerHeight - 214,
      navMsg: [
        {
          name: '商品',
          path: '/commodityList'
        }, {
          name: '商品库',
          path: '/commodityStorehouse'
        }
      ],
      storehouseData: [
        {
          name: {
            img: '',
            name: 'market'
          },
          count: 70,
          jincount: 50
        },
        {
          name: {
            img: '',
            name: 'market'
          },
          count: 70,
          jincount: 50
        },
        {
          name: {
            img: '',
            name: 'market'
          },
          count: 70,
          jincount: 50
        },
        {
          name: {
            img: '',
            name: 'market'
          },
          count: 70,
          jincount: 50
        },
        {
          name: {
            img: '',
            name: 'market'
          },
          count: 70,
          jincount: 50
        },
        {
          name: {
            img: '',
            name: 'market'
          },
          count: 70,
          jincount: 50
        },
        {
          name: {
            img: '',
            name: 'market'
          },
          count: 70,
          jincount: 50
        },
        {
          name: {
            img: '',
            name: 'market'
          },
          count: 70,
          jincount: 50
        },
        {
          name: {
            img: '',
            name: 'market'
          },
          count: 70,
          jincount: 50
        },
        {
          name: {
            img: '',
            name: 'market'
          },
          count: 70,
          jincount: 50
        }
      ]
    }
  },
  components: {
    VCommonHeaderLeft,
    Paging,
    navigation
  },
  methods: {
    sliceArray (array, size, id) {
      let result = []
      for (let x = 0; x < Math.ceil(array.length / size); x++) {
        let start = x * size
        let end = start + size
        result.push(array.slice(start, end))
      }
      return result[id]
    },
    getPageId (id = 1) {
      this.pageId = id
      // this.stock = this.sliceArray(this.parentMsg, this.pageNum, id - 1)
    },
    getPageNum (num) {
      // console.log(num)
      this.pageNum = num
      this.getPageId()
      // console.log(this.stock)
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.tableHeight = window.innerHeight - 214
        that.tableHeight = window.tableHeight
      })()
    }
  }
}
</script>

<style lang="scss" scoped>
.storehouse {
  width: 100%;
  overflow: hidden;
  margin-right: 10px;
  background-color: #fff;
  .storehouse-top {
    width: 100%;
    line-height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #f3f3f3;
    span {
      margin-left: 50px;
      display: inline-block;
      height: 48px;
      border-bottom: 2px solid #20ade5;
      color: #20ade5;
      padding: 0 20px;
      font-weight: 600;
    }
  }
  /deep/ table {
    thead {
      tr {
        th {
          padding: 8px 0;
          font-size: 12px;
          font-weight: 400;
          background-color: #fcfcfc;
        }
      }
    }
    tbody {
      tr {
        td {
          padding: 10px 0;
          font-size: 12px;
        }
      }
    }
  }
  .storehouse-content {
    display: flex;
    align-items: center;
    img {
      width: 48px;
      height: 48px;
      margin: 0 10px;
    }
  }
}
</style>
